var L = require('../../../components/zhgeo/leafletwx')
import {createMap} from '../../../components/zhgeo/base.map'
const app = getApp() //app.globalData

let Lmap,mapType,tif,line,points = [],interval

Page({

    /**
     * 页面的初始数据
     */
    data: {
      isShow:true,
      timeIndex:null,
      option:null,
      dataList:[],
      full:true,
      layerPath:null,
      layerData:null,
      timeFarme:['24小时','48小时','2周'],
      pointList:[],
      WHSite:null,
    },
    // 获取武汉站点
    getWuhanSite(){
        app.globalData.http.get('/ai-sensing-back-service/api/station').then(res => {
            this.setData({
                WHSite:res.data.items
            })
        })
    },
    // 加载wms
    addWms() {
        if(!tif) {
          tif = L.tileLayer.wms('http://ai-ecloud.whu.edu.cn/geoserver/PM25WuhanCC/wms?',
          {
            layers: '20230801080000_reconstruction_clip.tif',
            format: 'image/png',
            transparent: true,
            styles: 'PM25_50'
          })
        }
        tif.addTo(Lmap);

    },
    peakTimeSelect(e) {
      let index = e.currentTarget.dataset.item
      let list = []
      if(line)line.remove();
      if(interval)clearInterval(interval);
      if(points.length > 0){
        points.map(e=>{
            e.remove()
        })
      }
      this.setData({
        timeIndex:index
      })
      app.globalData.http.post("/ai-sensing-back-service/api/publishData/trend",{
        date: this.data.timeFarme[index],
        type: 1
      }).then(res=>{
          console.log(res)
          this.setData({
            dataList:res.data.items
          })
          this.data.dataList.map(e=>{
            this.data.WHSite.map(i=>{
                if(i.uniquecode == e.uniquecode) {
                    list.push([i.glatitude,i.glongitude])
                }
            })
          })
          this.setChart()
          this.setData({
            pointList:list
          })
          this.setPath(list)
          this.setPointPath()
      })
    },
    setPath(path) {
        line = L.polyline([path], {
            color: '#00ccff',
            weight: 3,
            zIndexOffset: 9
        },
        ).addTo(Lmap)
    },
    setPointPath() {
        let list = this.data.pointList
        let length = list.length
        let i = 0
        points = []
        interval = setInterval(()=>{
            if(i<length){
                let marker = L.marker([list[i][0],list[i][1]], {
                    src: 'https://7072-prod-0g6d813n9889e2e6-1322465086.tcb.qcloud.la/analysis/marker.png',
                    width: 20,
                    height: 25,
                    showInCenter: false,
                    zIndexOffset: 999
                }).addTo(Lmap);
                points.push(marker)
                
                i++
            }else{
                clearInterval(interval)
            }
        },500)
        // list.map((e,i)=>{
        //     setTimeout(()=>{
                
        //     },i*500)
            
        // })
    },
    showPath(e) {
        let boolean = e.detail.value
        if(boolean) {
            this.setPath(this.data.pointList)
        }else{
            if(line)line.remove();
        }
    },
    setChart() {
      var xdata = [];
      var ydata = [];
      var zdata = [];
      for (let i = 0; i < this.data.dataList.length; i++) {
        if (this.data.dataList[i] != null) {
          xdata.push(this.data.dataList[i].querytime);
          zdata.push(this.data.dataList[i].stationname);
          ydata.push(this.data.dataList[i].pm25onehour);
        }
      }
      this.setData({
        option:{
          grid:{
            bottom:'17%',
            right:'5%'
          },
          title: {
            text: 'PM2.5',
            show: true,
            top:10,
            left:3,
            textStyle: {
              width: 152,
              height: 13,
              fontSize: 14,
              fontFamily: 'Microsoft YaHei',
              fontWeight: '900',
              color: '#333333',
            },
          },
          xAxis: {
            //name: '时间',
            type: 'category',
            boundaryGap: false,
            // min: 6,
            //data: xdata,
            data: zdata,
            splitLine:{
              lineStyle:{
                type:'dashed'//设置网格线类型 dotted：虚线   solid:实线
              },
              show:true ,//隐藏或显示
              color:'#DCDCDC',
            },
            // x轴文字倾斜
            axisLabel:{
              // interval:1,
              rotate:0,//倾斜度 -90 至 90 默认为0
              margin:2,
              align:'center',
              padding:5,
              formatter: function(params) {
                    var newParamsName = ''
                    var paramsNameNumber = params.length
                    var provideNumber = 4
                    var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
                    for (let row = 0; row < rowNumber; row++) {
                    newParamsName +=
                      params.substring(
                      row * provideNumber,
                      (row + 1) * provideNumber
                      ) + '\n'
                    }
                    return newParamsName
                  },
            },
            textStyle:{
            //fontWeight:"bolder",
            textAlign:'right',
            // color: 'rgb(23,186,187)'
            color: '#333333'
            }
            
          },
          yAxis: {
            type: 'value',
            //name: 'PM2.5',
            axisLabel: {
              //show: true,
              textStyle: {
              color: '#333333'
              },
              align:'left',
              margin: 25
            }
          },
          series: [
            {
              name: 'PM2.5',
              type: 'line',
              data: ydata,
              itemStyle: {
                color: 'rgb(23,186,187)'
              },
              areaStyle: {
                color:{
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                      offset: 0, color: 'rgba(23,186,187,.3)' // 0% 处的颜色
                  }, {
                      offset: 1, color: 'rgba(23,186,187,0)' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              },
            },
            
          ]
        }
      })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
      wx.setNavigationBarTitle({
        title: '峰值迁移',
      })


      let that = this
      const container = this.selectComponent('#leafletwx')
      let min_zoom =  2
      let max_zoom = 18
      createMap(container,  {
          minZoom: min_zoom,
          maxZoom: max_zoom,
        }, function(map) {
        mapType = L.tileLayer('http://webrd03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}')
        mapType.addTo(map)
        // wx.request({
        //   url: 'https://7072-prod-0g6d813n9889e2e6-1322465086.tcb.qcloud.la/json/1%2B8.geojson',
        //   success (res) {
        //     var gj = L.geoJSON(res.data,
        //       {
        //         style: function(feature) {
        //           return {
        //           color: "#3388ff",
        //           fill: true,
        //           fillOpacity: 0.1,
        //           weight: 1,
        //           };
        //         }
        //       }
        //     ).addTo(map)
        //   },
        //   fail (err) {
        //     console.log(err)
        //   }
        // })
        map.setView([29.1, 114.332314],7)
        Lmap = map
        that.addWms()
      });
      this.getWuhanSite()
    },
  
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
  
    },
  
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
  
    },
  
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {
  
    },
  
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
  
    },
  
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
  
    },
  
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
  
    },
  
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {
  
    }
  })